import { UploadOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, message, Row, Spin, Upload } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import TextArea from 'antd/lib/input/TextArea';
import { RcFile } from 'antd/lib/upload';
import { UploadFile } from 'antd/lib/upload/interface';
import React, { useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { postProblem, uploadFile } from '../../api/threeApi';
import Footer from '../../components/Footer/Footer';

interface ProblemProps extends RouteComponentProps {}

export default function Problem(props: ProblemProps) {
	const [formProblem] = useForm();
	const [loading, setLoading] = useState(false);
	const [fileList, setFileList] = useState<UploadFile[]>([]);

	function beforeUpload(file: RcFile) {
		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
		if (!isJpgOrPng) {
			message.error('You can only upload JPG/PNG file!');
		}
		const isLt2M = file.size / 1024 / 1024 < 2;
		if (!isLt2M) {
			message.error('Image must smaller than 2MB!');
		}
		return isJpgOrPng && isLt2M;
	}

	return (
		<div className="content">
			<div className="d-f jc">
				<Spin spinning={loading}>
					<div className="w1200 bg-w pt20 pb32 plr28 mt32">
						<Row>
							<Col offset={4} span={16}>
								<Form
									form={formProblem}
									name="basic"
									onFinish={() => {
										formProblem.validateFields().then((values) => {
											setLoading(true);
											Promise.all(
												fileList.map((item) => {
													return new Promise<string>((resolve, reject) => {
														uploadFile(item.originFileObj)
															.then((res) => {
																resolve(res.full_uri);
															})
															.catch((err) => {
																reject(err);
															});
													});
												}),
											)
												.then((res) => {
													console.log(res);
													postProblem({ ...values, images: res }).then((res) => {
														message.success('意见反馈成功，感谢您的宝贵建议');
														setLoading(false);
													});
												})
												.catch((err) => {
													message.error('图片上传错误，请重试');
												});

											console.log(values);
										});
									}}
									onFinishFailed={() => {}}
									labelAlign="left"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 20 }}
								>
									<Form.Item
										name="title"
										label="标题"
										rules={[{ required: true, message: '请输入标题' }]}
										style={{ width: '100%' }}
									>
										<Input placeholder="请输入标题6-20字" />
									</Form.Item>
									<Form.Item label="上传截图" valuePropName="images">
										<Upload
											name="file"
											listType="picture"
											customRequest={(options) => {}}
											beforeUpload={beforeUpload}
											onChange={(info) => {
												const { fileList } = info;
												fileList.forEach((item) => {
													item.status = 'done';
												});
												setFileList(fileList);
											}}
										>
											<Button icon={<UploadOutlined />}>点击上传</Button>
										</Upload>
									</Form.Item>

									<Form.Item name="images" initialValue="" hidden noStyle>
										<Input />
									</Form.Item>

									<Form.Item
										name="content"
										label="内容"
										rules={[{ required: true, message: '请输入内容' }]}
										style={{ width: '100%' }}
									>
										<TextArea placeholder="请填写具体内容（如：哪个作品哪个页面，有哪些问题）帮助我们了解你的意见与建议" />
									</Form.Item>
									<Form.Item
										name="email"
										label="联系方式"
										rules={[{ required: true, message: '请输入联系方式' }]}
										style={{ width: '100%' }}
									>
										<Input placeholder="QQ/邮箱" />
									</Form.Item>
									<div className="ta-c">
										<Button
											style={{
												borderRadius: 50,
												fontSize: 18,
												padding: '8px 42px',
												height: 'auto',
											}}
											type="primary"
											htmlType="submit"
											className="w168"
										>
											确定
										</Button>
									</div>
								</Form>
							</Col>
						</Row>
					</div>
				</Spin>
			</div>
			<Footer {...props} />
		</div>
	);
}
